<script setup>
import {onMounted, ref} from "vue";
import socket from '@/utils/socket'
import local from "@/axios/local";

const pendingUUidList = ref([])
const task_type = {
  'upload_chunk': '文件分片上传'
}
const drawer = ref(false)
const taskList = ref([])
const Socket = new socket()

async function getData() {
  let {data} = await local.get('/cloud/getHistoryTasks')
  taskList.value = data
}

function showTask() {
  drawer.value = !drawer.value
  if (drawer.value) {
    getData()
  }
}
function percentage(item) {
  return ((item.upload_chunk_files.length/item.totalChunks) * 100) +'%'
}
async function appendTask(item) {
  drawer.value = true
  await getData()
  taskList.value.push(item)
  pendingUUidList.value.push(item.uuid)
  let data = taskList.value[taskList.value.length - 1]
  for (let i = 1; i <= data.totalChunks; i++) {
    if (!item.upload_chunk_files.includes(i)) {
      data.index = i
      local.post('/cloud/uploadChunkIndex', item).then(res => {
        data.upload_chunk_files.push(i)
        taskList.value[taskList.value.length - 1] = data
      })
    }
  }

}

defineExpose({
  getData,
  appendTask
})
</script>

<template>
  <div>
    <div @click="showTask" class="task-icon">
      <img src="@/assets/task.png" alt="">
    </div>
    <el-drawer
        v-model="drawer"
        custom-class="my-drawer"
        append-to-body
        height="50%"
        title="任务列表"
        direction="btt"

    >
      <template #header>
        <h4 style="color:black;text-align: left">任务列表</h4>
      </template>
      <div class="table" style="height: 100%">
        <el-table height="100%" :data="taskList">
          <el-table-column show-overflow-tooltip align="center" label="序号" type="index" width="60"/>
          <el-table-column show-overflow-tooltip align="center" label="任务类型" prop="upload_type" width="150">
            <template #default="{row}">
              <el-tag effect="plain" type="primary">{{ task_type[row.upload_type] }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip align="center" label="任务ID" width="200" prop="uuid"/>
          <el-table-column show-overflow-tooltip align="center" label="任务名称" prop="name"/>
          <el-table-column show-overflow-tooltip align="center" label="任务进度" prop="progress">
            <template #default="{row}">
              <div class="flex" v-if="row.status!==1">
                <el-progress
                    style="width: 80%;"
                    :percentage="percentage(row)"
                    status="success"
                />
                <div>
                  <span style="font-size: 14px;color: gray">{{ row.upload_chunk_files.length }}</span>
                  <span style="margin: 0 3px">/</span>
                  <span style="font-size: 16px;color: blue">{{ row.totalChunks }}</span>
                </div>
              </div>
              <div v-else>
                <el-tag type="success" effect="plain">已完成</el-tag>
              </div>
            </template>
          </el-table-column>


        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.task-icon {
  height: auto;
  position: fixed;
  bottom: 10%;
  right: 0;
  margin: 10px;
  z-index: 999;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;

  img {
    width: 30px;
    height: auto;

  }
}

.flex {
  display: flex;
  align-items: center;
}
</style>
<style>
.el-drawer {
  height: 60% !important;
  display: flex;
  flex-direction: column;

}
</style>